<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../assets/css/base.css">
    <style>
        .box{
            display: inline-block;
            background-color: white;
            min-height: 50px;
            min-width: 50px;
            padding: 20px;
            border: 1px solid black;
        }
        .box:active{
            background-color: rgba(165, 42, 42, 0.2);
        }
    </style>
</head>
<body>
    <div id="app">
        <!-- JS的事件传播模式=>event loop (事件循环)=> 微任务和宏任务 -->
        <pre v-pre class="note">
        事件传播:(事件冒泡|事件捕获)
                页面元素存在父子关系构成时，内部子元素被触发的事件会传递到父元素(同事件类型间)
                => 设定的事件回调因执行顺序的不同被分为
                    + 事件冒泡 ：内部子元素的事件回调先执行，然后依次向父元素调用
                    + 事件捕获 ：父元素的事件回调先执行，然后依次向子元素调用
        
        Vue的指令完成语法：v-指令名[:参数][.修饰符][.修饰符][……][="取值"]            
        
        Vue指令修饰符：通过 . 加载的功能描述，实现指令的相关控制操作;
                      事件修饰符可以通过 . 号定义多个的;

        Vue 事件传播修饰符
            * .stop ： 为事件添加阻止事件冒泡|事件捕获(方法执行)特性（调用js event.stopPropagation()）
            * .capture ：改变事件执行顺序，将冒泡事件转换为事件捕获
            * .self ： 事件只有被绑定的元素才具有权限触发 - 仍然保留事件冒泡(事件穿透)
        </pre>

        <div class="box" @click="printName('=>A')">
            A
            <div class="box" @click="printName('==>B')">
                B
                <div class="box" @click="printName('===>C')">
                    C
                    <div class="box" @click="printName('====>D')">
                        D
                        <div class="box" @click="printName('=====>E')">
                            E
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <hr>
        <div class="box" @click.capture="printName('=>A')">
            A
            <div class="box" @click.capture="printName('==>B')">
                B
                <div class="box" @click.capture="printName('===>C')">
                    C
                    <div class="box" @click.capture="printName('====>D')">
                        D
                        <div class="box" @click.capture="printName('=====>E')">
                            E
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <hr>
        <p>阻止事件冒泡</p>
        <div class="box" @click="printName('=>A')">
            A
            <div class="box" @click="printName('==>B')">
                B
                <div class="box" @click="printName('===>C')">
                    C
                    <!-- vue事件绑定时，事件源对象的名称叫做 $event -->
                    <!-- <div class="box" @click="printNameStop('====>D',$event)"> -->
                    <div class="box" @click.stop="printName('====>D')">
                        D
                        <div class="box" @click="printName('=====>E')">
                            E
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <p>阻止事件捕获</p>
        <div class="box" @click.capture="printName('=>A')">
            A
            <!-- <div class="box" @click.capture="printNameStop('==>B',$event)"> -->
            <div class="box" @click.capture.stop="printName('==>B')">
                B
                <div class="box" @click.capture="printName('===>C')">
                    C
                    <div class="box" @click.capture="printName('====>D')">
                        D
                        <div class="box" @click.capture="printName('=====>E')">
                            E
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <p>冒泡捕获混合出现(捕获优先于冒泡)</p>
        <div class="box" @click="printName('=>A')">
            A
            <div class="box" @click.capture="printName('==>B')">
                B
                <div class="box" @click.stop="printName('===>C')">
                    C
                    <div class="box" @click.capture="printName('====>D')">
                        D
                        <div class="box" @click="printName('=====>E')">
                            E
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <p>事件穿透</p>
        <div id="a" class="box" @click="printName('=>A')">
            A
            <div id="b" class="box" @click="showTip('==>B',$event)">
                B
                <div id="c" class="box">
                    C
                    <span>aaaa</span>
                </div>
            </div>
        </div>
        <br>
        <div id="a" class="box" @click="printName('=>A')">
            A
            <div id="b" class="box" @click.self="printName('==>B')">
                B
                <div id="c" class="box"  @click="printName('===>C')">
                    C
                </div>
            </div>
        </div>
    </div>
    <script type="module">
        import { createApp } from "../assets/vue3/vue.esm-browser.js";
        createApp({
            data(){
                return {
                   
                }
            },
            methods:{
                printName(name){
                    console.log(name)
                },
                printNameStop(name,e){
                    console.log(name,e)
                    e.stopPropagation()
                },
                showTip(name,event){
                    // console.log(name)
                    // console.log(event)
                    // console.log(event.target) // 事件被触发的原始DOM对象
                    // // JS的DOM属性上存在一些特殊的瞬时取值属性，这类属性只能在执行瞬间进行取值，通过浏览器打印对象的方式是无法查看结果的
                    // console.log(event.currentTarget) // 当前事件触发时对应的绑定的DOM元素对象
                    // console.log(event.target==event.currentTarget)
                    if(event.target==event.currentTarget){
                        console.log(name)
                        console.log(event)
                        console.log(event.target) // 事件被触发的原始DOM对象
                        // JS的DOM属性上存在一些特殊的瞬时取值属性，这类属性只能在执行瞬间进行取值，通过浏览器打印对象的方式是无法查看结果的
                        console.log(event.currentTarget) // 当前事件触发时对应的绑定的DOM元素对象
                        console.log(event.target==event.currentTarget)
                        alert(name)
                    }
                }
            }
        }).mount("#app");
    </script>
</body>
</html>